<template>
	<view class="pageBox">
		<!--团队PV-->
		
		<view class="headerBox">
			<view class="headerContent">
				<view class="headerNavbar">
					<text class="wlIcon-fanhui1 text-white" @tap="$wanlshop.back(1)"></text>
					<view class="headerTitle">团队PV</view>
				</view>
			</view>
		</view>
		
		<!-- <picker  @change="confirm" :value="year" :range="yearList">
			<view class="title-box">
				<view class="date">{{ selDateText }}</view>
				<image src="/static/images/down.png" class="down-image"></image>
			</view>
		</picker> -->
		
		<view class="title-box" @click="openCalendar">
			<view>{{selDateText || '选择日期'}}</view>
			<image src="/static/images/down.png" class="down-image"></image>
		</view>

		<uni-calendar 
		ref="calendar"
		:insert="false"
		:range="true"
		:showReturn="false" 
		@confirm="confirmStart" />
		
		
<!-- 		<u-select v-model="showCalendar" mode="single-column" :list="yearList" @confirm="confirm">选择年份</u-select> -->
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				
				<view class="info-box">
					<view class="nickname">{{item.date || ''}}</view>
					<view class="pv">{{item.pv || '0'}}</view>
				</view>
			</view>
		</view>
			
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			dataList:[
				// {
				// 	date: '2020-12-15',
				// 	pv:10
				// },
			],
			year:'',
			
			//日期选择
			propsDate: '', //日期参数
			selDateText: '选择日期',
			start_date: '',
			end_date: '',
			
			yearList: [],
		}
	},
	onLoad() {
		this.calculateDateRange();
		this.getList();
		//this.getYear();
	},
	onShow(){
		
	},
	methods: {
		calculateDateRange() {
		    var currentDate = new Date();
		    var startDate = new Date();
		    startDate.setDate(currentDate.getDate() - 6);
		    
		    this.start_date = this.formatDate(startDate);
		    this.end_date = this.formatDate(currentDate);
			this.selDateText = this.start_date + "~" + this.end_date;
		},
		formatDate(date) {
		    var year = date.getFullYear();
		    var month = ("0" + (date.getMonth() + 1)).slice(-2);
		    var day = ("0" + date.getDate()).slice(-2);
		    return year + "-" + month + "-" + day;
		},
		getYear(){
			let now = new Date();
			let nowyear = now.getFullYear();
			
			for(var i = nowyear; i >= 2021; i--){
				// let tmp = {
				// 	value: i,
				// 	label: i
				// }
				
				let tmp = i;
				this.yearList.push(tmp);
			}
		},
		confirm(e){
			console.log("go confirm", e);
			this.dataList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			// this.selDateText = `${e[0]['value']}`;
			// this.year = `${e[0]['value']}`;
			this.selDateText = this.yearList[e.detail.value];
			this.year =  this.yearList[e.detail.value];
			this.getList();
		},
		//  今日
		getToday() {
			let now = new Date();
			let dateText = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`;
			this.selDateText = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			this.start_date = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			this.end_date = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			this.propsDate = `${dateText}-${dateText}`;
		},
		// 日期选择
		selDate(e) {
			console.log("go selDate", e);
			this.dataList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.selDateText = `${e.year}`;
			this.year = `${e.year}`;
			this.getList();
			this.$refs.uCalendar.init();
		},
		goBack(){
			uni.navigateBack({
				delta:1
			})
		},
		callPhone(phone){
			uni.makePhoneCall({
			    phoneNumber: phone
			});
		},
		getList(){
			let that = this;
			
			uni.request({
				url: '/user/myteampv',
				data: {
					start_date: this.start_date,
					end_date: this.end_date,
				},
				success: res => {
					res = res.res
					if (res.code === 1) {
						that.dataList = [...that.dataList, ...res.data];
					}
				}
			});
		},
		openCalendar(){
			this.$refs.calendar.open();
		},
		confirmStart(data){
			console.log(data);
			if(data.range.after > data.range.before){
				this.start_date = data.range.before;
				this.end_date = data.range.after;
				this.selDateText = this.start_date + "~" + this.end_date;
			}
			
			if(data.range.after < data.range.before){
				this.start_date = data.range.after;
				this.end_date = data.range.before;
				this.selDateText = this.start_date + "~" + this.end_date;
			}
		
			if(data.range.after == data.range.before){
				this.start_date = data.range.before;
				this.end_date = data.range.before;
				this.selDateText = this.start_date;
			}
			
			this.dataList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.getList();
		},
	}
}
</script>


<style>
page{
	background-color:  #ffffff !important;	
}
</style>


<style scoped lang="scss">
	
.headerBox{
	
	.headerContent{
		width: 750rpx;
		height: 200rpx;
		background: #9C3928;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top:115rpx;
	}
	
	.headerNavbar{
		display: flex;
		padding-left: 33rpx;
	}
	
	.headerTitle{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		padding-left: 246rpx;
	}
	
	.headerBody{
		width: 702rpx;
		height: 336rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 48rpx;
		margin-left: 24rpx;
		display: flex;
		justify-content: flex-start;
		padding: 31rpx 32rpx;
		flex-direction: column;
	}
	
	.numBox{
		margin-top: 58rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		justify-content: space-between;
		padding: 0rpx 80rpx;
	}
	
	.num-item{
		display: flex;
		flex-direction: column;
	}
	
	.value{
		font-size: 64rpx;
		font-family: Roboto-Medium, Roboto;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 75rpx;
	}
	
	.title{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33rpx;
		margin-top: 12rpx;
	}
	
	.line{
		width: 1rpx;
		height: 110rpx;
		background-color: rgba(255,255,255,0.41);
	}
}	

.title-box{
	display: flex;
	margin-top: 34rpx;
	margin-left: 32rpx;
	
	.user-image{
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}
	
	.record-title{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #9C3928;
		line-height: 42rpx;
	}
}	

.list{
	margin-top: 24rpx;
	
	.list-item{
		//padding: 18rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.avatar{
		width: 84rpx;
		height: 84rpx;
		opacity: 1;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.info-box{
		display: flex;
		flex: 1;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 60rpx;
		border-bottom: 2rpx dashed #dadada;
	}
	
	.nickname{
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 44rpx;
		margin-right: 22rpx;
	}
	
	.lable{
		font-size: 18rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 21rpx;
		background: #FCBB3A;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		padding: 6rpx 16rpx;
	}
	
	.phone{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #707070;
		line-height: 44rpx;
		margin-top: 0rpx;
	}
	
	.phone-image{
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}
}

.title-box{
	display: flex;
	align-items: center;
	padding: 28rpx 30rpx 10rpx 20rpx;
	
	.title{
		display: flex;
		align-items: center;
		padding-right: 10rpx;
		padding-left: 10rpx;
	}
	
	.date{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 42rpx;
	}
	
	.down-image{
		width: 28rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}

}

	

	
</style>